<template>
	<view class="person_bank_revise">
		<view class="main">
			
			<u-form :model="user_info" ref="uForm" :rules="rules">
				
		
				<view class="input rd-8">
					<u-form-item label="店铺名称" prop="shop_name" label-width="90px" required>
						<u-input border="none" v-model="user_info.shop_name" type="text" :clearable='false' placeholder='请输入店铺名称' />
					</u-form-item>
				</view>
				
				<view class="input rd-8">
					<u-form-item label="姓名" prop="username" label-width="90px" required>
						<u-input border="none" v-model="user_info.username" type="text" :clearable='false' placeholder='请输入姓名' />
					</u-form-item>
				</view>
				<view class="input rd-8">
					<u-form-item label="支付宝账户" prop="zfb_account" label-width="90px" required>
						<u-input border="none" v-model="user_info.zfb_account" type="text" :clearable='false' placeholder='请输入支付宝账户' />
					</u-form-item>
				</view>
				
				<view class="input rd-8">
					<u-form-item label="银行卡账号（非必填）" prop="k" label-width="90px">
						<u-input border="none" v-model="user_info.bank_card" type="text" :clearable='false' placeholder='请输入银行卡账户' />
					</u-form-item>
				</view>
				
				<view class="input rd-8">
					<u-form-item label="开户行（非必填）" prop="bank_account" label-width="90px">
						<u-input border="none" v-model="user_info.bank_account" type="text" :clearable='false' placeholder='请输入开户行' />
					</u-form-item>
				</view>
				
				</u-form>
			</view>
			<!-- 底部 -->
			<BottomBtn title='确认提交' @submit='submitBtn'></BottomBtn>
		
	</view>
</template>

<script>
	import { mapState } from 'vuex';
	import BottomBtn from '@/components/bottom_btn/bottom_btn.vue';
	export default {
		components:{
			BottomBtn
		},
		data() {
			return {
				show:false,
				list:[],
				bankId:'',
				bank:'',
				card:'',
				// 
				pass:'',
				passShow:false,
				code:'',
				disabled:false,
				sendTime:60,
				time:null,
				user_info:{
					shop_name:'',
					username:'',
					zfb_account:'',
					bank_card:'',
					bank_account:''
				},
				rules: {
					shop_name: [
						{required: true,message: '请输入店铺名称',trigger: ['blur', 'change']}
					],
					username: [
						{required: true,message: '请输入姓名',trigger: ['blur', 'change']}
					],
					zfb_account: [
						{required: true,message: '请输入支付宝账户',trigger: ['blur', 'change']}
					],
				}
			};
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onLoad(opt) {
			this.withdrawAccountInfo();
		},
		methods:{
			//获取提现账户信息
			withdrawAccountInfo() {
				var that = this
				that.$httpApi.withdrawAccountInfo(that.search).then((res) => {
					if (res.code == 1) {
						if(res.data){
							that.user_info = res.data
						}
					}
				})
			},
			// 底部按钮
			async submitBtn(){
				const that = this;
				try {
					await that.$refs.uForm.validate();
				} catch (error) {
					return; 
				}
				that.$tips.showLoading('保存中');
				try {
					const res = await that.$httpApi.addWithdrawAccount(that.user_info);
					that.$tips.hideLoading();
					if(res.code === 1){
						that.$tips.showToast('保存成功');
					} else {
						that.$tips.showToast(res.msg || '保存失败', 'none');
					}
				} catch (err) {
					that.$tips.hideLoading();
					that.$tips.showToast('网络异常，请稍后重试', 'none');
					console.error('提交失败：', err);
				}
			},
		}
	}
</script>

<style lang="less">
	.person_bank_revise{
		width: 100%;
		box-sizing: border-box;
		.main{
			width: 100%;
			padding: 20rpx 32rpx;
			.input{
				width: 100%;
				background:#fff;
				margin:20rpx 0;
				border-radius:16rpx;
				padding:10rpx 26rpx;
				.left{
					width: 200rpx;
					font-size: 28rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #222222;
				}
				.right{
					width: calc(100% - 200rpx);
					display: flex;
					align-items: center;
					u-input{
						width: 100%;
						font-size: 28rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #222222;
					}
					.right_text{
						width: 100%;
						display: flex;
						align-items: center;
						justify-content: space-between;
						.r_txt{
							font-size: 28rpx;
							font-weight: 500;
							color: rgb(192, 196, 204);
						}
						.r_txt_color{
							color: #222222;
						}
					}
				}
				.right_code{
					width: calc(100% - 200rpx);
					display: flex;
					align-items: center;
					justify-content: space-between;
					u-input{
						width: calc(100% - 160rpx);
						font-size: 28rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #222222;
					}
					text{
						display: block;
						width: 160rpx;
						line-height: 70rpx;
						text-align: center;
						font-size: 28rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #26C281;
					}
				}
			}
		}
		.input_pass{
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			image{
				display: block;
				width: 40rpx;
				height: 40rpx;
			}
			.pass{
				width: calc(100% - 200rpx);
				::v-deep .u-input__input{
					font-size: 32rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #222222;
				}
			}
			.btn{
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
			}
		}
	}
</style>
